<template>
  <a-modal
    title="驾驶员信息审核"
    style="top: 20px;"
    :width="800"
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
  >
    <a-form :form="form">
      <a-form-item style="display:none">
        <a-input v-decorator="['driverid']"/>
      </a-form-item>
      <a-form-item style="display:none">
        <a-input v-decorator="['driverImg']"/>
      </a-form-item>
      <a-form-item style="display:none">
        <a-input v-decorator="['workgetTime']"/>
      </a-form-item>
      <a-form-item style="display:none">
        <a-input v-decorator="['workstartTime']"/>
      </a-form-item>
      <a-form-item style="display:none">
        <a-input v-decorator="['workendTime']"/>
      </a-form-item>
      <a-form-item style="display:none">
        <a-input v-decorator="['educationStartDate']"/>
      </a-form-item>
      <a-form-item style="display:none">
        <a-input v-decorator="['educationEndDate']"/>
      </a-form-item>
      <a-form-item style="display:none">
        <a-input v-decorator="['testStartDate']"/>
      </a-form-item>
      <a-form-item style="display:none">
        <a-input v-decorator="['testEndDate']"/>
      </a-form-item>
      <a-row :gutter="30">
        <a-col :md="12" :sm="15">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="姓名">
            <a-input placeholder="" v-decorator="['driverName',{rules: [{required: true, message: '请输入司机姓名'}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="15">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="身份证号码">
            <a-input placeholder="" v-decorator="['cardid',{rules: [{required: true, message: '请输入身份证号'}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="15">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="手机号">
            <a-input placeholder="" v-decorator="['phoneno',{rules: [{required: true, message: '请输入手机号'}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="15">
          <a-form-item
            :labelCol="
              labelCol"
            :wrapperCol="wrapperCol"
            label="上级部门"
          >
            <a-tree-select
              v-decorator="['stationid', {rules: [{ required: true, message: '请选择上级部门' }]}]"
              :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
              :treeData="depts"
              placeholder="上级部门"
              treeDefaultExpandAll
            >
            </a-tree-select>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="15">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="资格证证号">
            <a-input placeholder="" v-decorator="['cardid',{rules: [{required: true, message: '请输入资格证证号'}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="15">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="准驾车型">
            <a-input placeholder="" v-decorator="['wlicenseType',{rules: [{required: true, message: '请输入准驾车型'}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="15">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="资格证类别">
            <a-input placeholder="" v-decorator="['workType',{rules: [{required: true, message: '请输入资格证类别'}]}]"/>
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="15">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="初领日期">
            <a-date-picker @change="onChangeWorkGet" v-decorator="['workgetTimi',{rules: [{required: true,message: '请选择初领日期'}]}]" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="15">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="资格证期限">
            <a-range-picker @change="onChangeWorkTime" v-decorator="['workstartTime1',{rules: [{required: true,message: '请选择资格证期限'}]}]"/>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="继续教育日期">
            <a-range-picker @change="onChangeEducation" v-decorator="['educationDate',{rules: [{required: true,message:'请选择继续教育日期'}]}]"/>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="诚信考核日期">
            <a-range-picker @change="onChangeTest" v-decorator="['testDate',{rules: [{required: true,message:'请选择考核日期'}]}]"/>
          </a-form-item>
        </a-col>
        <div class="clearfix">
          <a-upload
            :action="uploadUrl"
            :headers="headers"
            list-type="picture-card"
            :file-list="fileList"
            @preview="handlePreview"
            @change="handleChange"
            :remove="handleRemove"
            :showUploadList="true"
          >
            <div v-if="fileList.length < 1">
              <a-icon type="plus" />
              <div class="ant-upload-text">
                Upload
              </div>
            </div>
          </a-upload>
          <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
            <img alt="example" style="width: 100%" :src="previewImage" />
          </a-modal>
        </div>
      </a-row>
    </a-form>
  </a-modal>
</template>
<script>
import { identityAuthentication } from '@/api/shifts/driverinfo'
import { getlistForShiftsDriverInfo } from '@/api/system'
import pick from 'lodash.pick'
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
// import address from '@/api/shifts/url'
function getBase64 (file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}
export default {
  name: 'DriverCheckModal',
  props: {
  },
  components: {
  },
  data () {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 8 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      label: {
        span: 5,
        offset: 12
      },
      depts: [],
      confirmLoading: false,
      mdl: {},
      form: this.$form.createForm(this),
      previewVisible: false,
      previewImage: '',
      uploadUrl: process.env.VUE_APP_API_BASE_URL + '/shifts/img/upload',
      headers: {
        token: Vue.ls.get(ACCESS_TOKEN)
      },
      removeIds: [],
      fileList: [
        {
          uid: '0',
          name: 'image.png',
          status: 'done',
          url: ''
        }
      ],
      fileList1: [
        {
          uid: '0',
          name: 'image.png',
          status: 'done'
        }
      ]
    }
  },
  beforeCreate () {
  },
  created () {
    getlistForShiftsDriverInfo().then(res => {
      this.buildtree(res.rows, this.depts, 115)
    })
  },
  methods: {
    // 驳回方法初始化model
    reject () {
      this.form.resetFields()
      this.edit({ driverid: 0 })
    },
    // 添加和修改初始化model
    add () {
      this.form.resetFields()
      this.edit({ driverid: 0 })
    },
    edit (record) {
      this.fileList = this.fileList1
      this.$data.fileList[0].url = ''
      const imgurl = {
        driverimgurl: 'http://172.16.101.77:9527/shifts'
      }
      if (typeof record.driverImg === 'undefined') {
        this.$data.fileList[0].url = ''
      } else {
        this.$data.fileList[0].url = imgurl.driverimgurl + record.driverImg
      }
      var signupST
      var workendTime
      var workstartTime
      var educationStartDate
      var educationEndDate
      var testStartDate
      var testEndDate
      this.mdl = Object.assign(record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(this.mdl, 'driverid', 'driverName', 'phoneno', 'cardid', 'stationid', 'cardid', 'wlicenseType', 'workType', 'workgetTime', 'workstartTime', 'workendTime', 'educationStartDate', 'educationEndDate', 'testStartDate', 'testEndDate', 'workType', 'driverImg'))
        if (record.workgetTime != null) {
          signupST = this.$moment(record.workgetTime).format('YYYY-MM-DD')
          this.form.setFieldsValue({ workgetTimi: this.$moment(signupST, 'YYYY-MM-DD') })
        } else {
          this.form.setFieldsValue({ workgetTimi: '' })
        }
        if (record.workstartTime != null && record.workendTime != null) {
          workstartTime = this.$moment(record.workstartTime).format('YYYY-MM-DD')
          workendTime = this.$moment(record.workendTime).format('YYYY-MM-DD')
          this.form.setFieldsValue({ workstartTime1: [this.$moment(workstartTime, 'YYYY-MM-DD  HH:mm:ss'), this.$moment(workendTime, 'YYYY-MM-DD  HH:mm:ss')] })
        } else {
          this.form.setFieldsValue({ workstartTime1: ['', ''] })
        }
        if (record.educationStartDate != null && record.educationEndDate != null) {
          educationStartDate = this.$moment(record.educationStartDate).format('YYYY-MM-DD')
          educationEndDate = this.$moment(record.educationEndDate).format('YYYY-MM-DD')
          this.form.setFieldsValue({ educationDate: [this.$moment(educationStartDate, 'YYYY-MM-DD  HH:mm:ss'), this.$moment(educationEndDate, 'YYYY-MM-DD  HH:mm:ss')] })
        } else {
          this.form.setFieldsValue({ educationDate: ['', ''] })
        }
        if (record.testStartDate != null && record.testEndDate != null) {
          testStartDate = this.$moment(record.testStartDate).format('YYYY-MM-DD')
          testEndDate = this.$moment(record.testEndDate).format('YYYY-MM-DD')
          this.form.setFieldsValue({ testDate: [this.$moment(testStartDate, 'YYYY-MM-DD  HH:mm:ss'), this.$moment(testEndDate, 'YYYY-MM-DD  HH:mm:ss')] })
        } else {
          this.form.setFieldsValue({ testDate: ['', ''] })
        }

        // this.from.setFieldsValue({ testStartDate: testStartDate })
      })
    },
    buildtree (list, arr, parentId) {
      list.forEach(item => {
        if (item.parentId === parentId) {
          var child = {
            key: item.deptId,
            value: item.deptId + '',
            title: item.deptName,
            children: []
          }
          this.buildtree(list, child.children, item.deptId)
          arr.push(child)
        }
      })
    },
    // 日期控件的初始值
    onChangeWorkGet (date, dateString) {
      this.form.setFieldsValue({ workgetTime: dateString })
    },
    onChangeWorkTime (date, dateString) {
      this.form.setFieldsValue({ workstartTime: dateString[0] })
      this.form.setFieldsValue({ workendTime: dateString[1] })
    },
    onChangeEducation (date, dateString) {
      this.form.setFieldsValue({ educationStartDate: dateString[0] })
      this.form.setFieldsValue({ educationEndDate: dateString[1] })
    },
    onChangeTest (date, dateString) {
      this.form.setFieldsValue({ testStartDate: dateString[0] })
      this.form.setFieldsValue({ testEndDate: dateString[1] })
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.confirmLoading = true
          identityAuthentication(values).then(res => {
            if (res.code === 0) {
              this.$message.success(res.msg)
              this.$emit('ok')
              this.visible = false
            } else {
              this.$message.error(res.msg)
            }
          }).catch(() => {
            this.$message.error('系统错误，请稍后再试')
          }).finally(() => {
            this.confirmLoading = false
          })
        }
      })
    },
    handleCancel () {
      this.previewVisible = false
    },
    async handlePreview (file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleChange ({ fileList }) {
      if (fileList[0] !== undefined) {
        if (fileList[0].status === 'done') {
          var str = fileList[0].response.msg.slice(8)
          this.form.setFieldsValue({ driverImg: str })
        }
        this.fileList = fileList
      }
    },
    handleRemove (file) {
      console.log('删除方法')
      if (!file.size) {
        this.removeIds.push('0')
      }
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    }
  },
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
  }
}
</script>
<style scoped>
.ant-select {
     border-radius: 50px;
    }
.clearfix{
  float: right;
  margin-right: 200px;
}
</style>
